<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>问题跟踪系统</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1 class="main-title">问题跟踪系统</h1>
        
        <div class="search-section">
            <div class="filter-group">
                <select id="statusFilter">
                    <option value="">状态</option>
                    <option value="处理中">处理中</option>
                    <option value="待处理">待处理</option>
                    <option value="已解决">已解决</option>
                    <option value="已关闭">已关闭</option>
                </select>
                <select id="priorityFilter">
                    <option value="">优先级</option>
                    <option value="紧急">紧急</option>
                    <option value="普通">普通</option>
                    <option value="低优先级">低优先级</option>
                </select>
            </div>
            <div class="search-group">
                <input type="text" id="searchKeyword" placeholder="搜索关键词" class="search-input">
                <button class="search-btn">搜索</button>
                <button class="reset-btn">重置</button>
            </div>
        </div>

        <div class="date-filter-section">
            <div class="date-filter">
                <span>创建时间：</span>
                <select id="yearSelect" class="year-select">
                    <option value="">年</option>
                </select>
                <select id="monthSelect" class="month-select">
                    <option value="">月</option>
                </select>
                <select id="daySelect" class="day-select">
                    <option value="">日</option>
                </select>
                <span class="date-separator">至</span>
                <select id="endYearSelect" class="year-select">
                    <option value="">年</option>
                </select>
                <select id="endMonthSelect" class="month-select">
                    <option value="">月</option>
                </select>
                <select id="endDaySelect" class="day-select">
                    <option value="">日</option>
                </select>
            </div>
        </div>

        <div class="content-section">
            <div class="table-header">
                <h2>问题列表</h2>
                <button class="add-issue-btn">新建问题</button>
            </div>
            <table class="issues-table">
                <thead>
                    <tr>
                        <th>问题标题</th>
                        <th>状态</th>
                        <th>优先级</th>
                        <th>创建者</th>
                        <th>创建时间</th>
                        <th>更新时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="issuesTableBody">
                    <!-- 表格内容将通过JavaScript动态生成 -->
                </tbody>
            </table>
            <div class="pagination">
                <span>共 45 条</span>
                <select class="page-size">
                    <option value="10">10条/页</option>
                    <option value="20">20条/页</option>
                    <option value="50">50条/页</option>
                </select>
                <div class="page-buttons">
                    <button class="prev-btn">上一页</button>
                    <button class="page-num">1</button>
                    <button class="page-num">2</button>
                    <button class="page-num">3</button>
                    <button class="page-num">4</button>
                    <button class="page-num">5</button>
                    <button class="next-btn">下一页</button>
                </div>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html> 